<template>
          <div class="baseList">

            <div class="newBox">
            <button class="bt wt-120" @click="handleBulid()">
                新增护理项目
            </button>
            </div>

            <div class="tableBoxs">
      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table
        row-key="index"
        :data="data"
        :columns="COLUMNS"
        :stripe="stripe"
        :bordered="bordered"
        :hover="hover"
        :table-layout="tableLayout ? 'auto' : 'fixed'"
        :size="size"
        :show-header="showHeader"
        cell-empty-content="-"
        resizable
       
      >
      <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
      <template #image="{ row }">
                  <div>
                      <div class="tdesign-demo-image-viewer__base">
                          <t-image-viewer :images="[row.image]">
                              <template #trigger="{ open }">
                                  <div class="tdesign-demo-image-viewer__ui-image">
                                      <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                                      <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                                          <span>
                                              <BrowseIcon size="1.4em" /> 预览
                                          </span>
                                      </div>
                                  </div>
                              </template>
                          </t-image-viewer>
                      </div>
                  </div>
      </template>
  
  
         <!-- 价格拼接 -->
         <template #price="{ row }">
          {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
      </template>
  
  <template #op="{ row }">
    <t-space>
  
      <t-link theme="danger" hover="color"  target="_blank" @click="handleClickDelete(row)">删除</t-link>
  
      <t-link theme="primary"  target="_self" @click="handleUpdate(row)">编辑</t-link>
  
      <t-link :theme="row.status===1?'danger':'default'" hover="underline" @click="handleForbidden(row)">{{ row.status === 1 ? '禁用' : '启用' }}  </t-link>
     
    </t-space>
  </template>
  
    </t-table>
  <!-- 分页 -->
  <t-pagination 
    v-model="pagination.pageNum" 
    v-model:pageSize="pagination.pageSize"    
    :total="pagination.total" 
    
    @page-size-change="onPageSizeChange"
    @current-change="onCurrentChange" />
  
            </div>
          </div>
  
  
  </template>
  
  <script setup lang="jsx">
  import { ref,onMounted  } from 'vue';
  import { getProjectList } from '@/api/serve'
  import { COLUMNS } from '../constants'
  import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next';
  import { MessagePlugin } from 'tdesign-vue-next';
  
  const stripe = ref(true);
  const bordered = ref(true);
  const hover = ref(false);
  const tableLayout = ref(false);
  const size = ref('medium');
  const showHeader = ref(true);

  //子类接受的属于父类传来的参数
const prop =defineProps({
    data:{
      type:Object,
      default: () => {
            return {}
        }
    },
    pagination: {
      type:Object,
      default: () => {
            return {}
        }
    },total: {
      type:Number,
      default: () => {
            return 0
        }
    }

}) 
  
     //判断当前字段是否包含了小数点
     const isDecimals = (val) => {
        if (String(val).indexOf('.') > -1) {
          return true
        }
        return false
      };
  
  //声明父组件传递过来的方法
  const emit = defineEmits([
  
    'onCurrentChange',
    'onPageSizeChange',
    'handleBulid',
    'handleUpdate',
    'handleClickDelete',
    'handleForbidden'
])

//调用父组件的方法


const onCurrentChange = (index, pageInfo) => {
    emit('onCurrentChange', index, pageInfo)
};

const onPageSizeChange = (val) => {
    emit('onPageSizeChange', val)
};
  

//新增按钮
const handleBulid = () =>{
 emit('handleBulid')
  console.log("表格页面接到了点击新增按钮事件")
}

//编辑按钮
const handleUpdate = (row) =>{
  emit('handleUpdate',row)

}

//删除按钮
const handleClickDelete  = (row) =>{
  emit('handleClickDelete',row)

}

// 禁用
const handleForbidden = (row) => {
  emit('handleForbidden', row)
}


  </script>